'use client'

import { Box, Button, FormControl, FormLabel, VStack, HStack, Select, Slider, SliderTrack, SliderFilledTrack, SliderThumb, Switch, useColorModeValue, Popover, PopoverTrigger, PopoverContent, PopoverArrow, PopoverCloseButton, PopoverHeader, PopoverBody, NumberInput, NumberInputField, NumberInputStepper, NumberIncrementStepper, NumberDecrementStepper, IconButton } from '@chakra-ui/react'
import { FiSettings } from 'react-icons/fi'
import { useState, useEffect } from 'react'
import { useSettingsStore, FontSizeType } from '@/store/settingsStore'

export const EditorSettings = () => {
  const bgColor = useColorModeValue('white', 'gray.800')
  const borderColor = useColorModeValue('gray.200', 'gray.700')
  
  const { editorSettings, updateSettings } = useSettingsStore()
  
  // 本地状态用于表单
  const [localSettings, setLocalSettings] = useState({
    theme: editorSettings.theme,
    fontSize: editorSettings.fontSize,
    fontFamily: editorSettings.fontFamily,
    lineHeight: editorSettings.lineHeight,
    paragraphSpacing: editorSettings.paragraphSpacing,
    showWordCount: editorSettings.showWordCount,
    focusMode: editorSettings.focusMode,
    autoSaveInterval: 30 // 默认30秒
  })
  
  // 当editorSettings变化时更新本地状态
  useEffect(() => {
    setLocalSettings({
      theme: editorSettings.theme,
      fontSize: editorSettings.fontSize,
      fontFamily: editorSettings.fontFamily,
      lineHeight: editorSettings.lineHeight,
      paragraphSpacing: editorSettings.paragraphSpacing,
      showWordCount: editorSettings.showWordCount,
      focusMode: editorSettings.focusMode,
      autoSaveInterval: 30 // 从全局设置中获取
    })
  }, [editorSettings])
  
  // 保存设置
  const saveSettings = () => {
    // 转换自动保存间隔为数字
    const autoSaveIntervalNum = typeof localSettings.autoSaveInterval === 'string' 
      ? parseInt(localSettings.autoSaveInterval, 10) 
      : localSettings.autoSaveInterval;
      
    updateSettings({
      editorSettings: {
        ...editorSettings,
        ...localSettings
      },
      autoSaveInterval: autoSaveIntervalNum
    })
  }
  
  return (
    <Popover placement="bottom-end">
      <PopoverTrigger>
        <IconButton
          aria-label="编辑器设置"
          icon={<FiSettings />}
          size="sm"
          variant="ghost"
        />
      </PopoverTrigger>
      <PopoverContent width="300px">
        <PopoverArrow />
        <PopoverCloseButton />
        <PopoverHeader>编辑器设置</PopoverHeader>
        <PopoverBody>
          <VStack spacing={4} align="stretch">
            <FormControl>
              <FormLabel>主题</FormLabel>
              <Select
                value={localSettings.theme}
                onChange={(e) => setLocalSettings({...localSettings, theme: e.target.value as any})}
              >
                <option value="light">浅色</option>
                <option value="dark">深色</option>
                <option value="system">跟随系统</option>
              </Select>
            </FormControl>
            
            <FormControl>
              <FormLabel>字体大小</FormLabel>
              <HStack>
                <Select
                  value={localSettings.fontSize}
                  onChange={(e) => setLocalSettings({...localSettings, fontSize: e.target.value as 'small' | 'medium' | 'large'})}
                >
                  <option value="small">小</option>
                  <option value="medium">中</option>
                  <option value="large">大</option>
                </Select>
              </HStack>
            </FormControl>
            
            <FormControl>
              <FormLabel>字体</FormLabel>
              <Select
                value={localSettings.fontFamily}
                onChange={(e) => setLocalSettings({...localSettings, fontFamily: e.target.value})}
              >
                <option value="">默认</option>
                <option value="'Noto Serif SC', serif">宋体</option>
                <option value="'Noto Sans SC', sans-serif">黑体</option>
                <option value="'FZXS', monospace">仿宋</option>
                <option value="'FZKT', cursive">楷体</option>
              </Select>
            </FormControl>
            
            <FormControl>
              <FormLabel>行高</FormLabel>
              <HStack>
                <Slider
                  min={1}
                  max={3}
                  step={0.1}
                  value={localSettings.lineHeight}
                  onChange={(val) => setLocalSettings({...localSettings, lineHeight: val})}
                  flex="1"
                >
                  <SliderTrack>
                    <SliderFilledTrack />
                  </SliderTrack>
                  <SliderThumb />
                </Slider>
                <Box minW="45px" textAlign="right">
                  {localSettings.lineHeight.toFixed(1)}
                </Box>
              </HStack>
            </FormControl>
            
            <FormControl>
              <FormLabel>段落间距</FormLabel>
              <HStack>
                <Slider
                  min={0.5}
                  max={3}
                  step={0.1}
                  value={localSettings.paragraphSpacing}
                  onChange={(val) => setLocalSettings({...localSettings, paragraphSpacing: val})}
                  flex="1"
                >
                  <SliderTrack>
                    <SliderFilledTrack />
                  </SliderTrack>
                  <SliderThumb />
                </Slider>
                <Box minW="45px" textAlign="right">
                  {localSettings.paragraphSpacing.toFixed(1)}
                </Box>
              </HStack>
            </FormControl>
            
            <FormControl>
              <FormLabel>自动保存间隔（秒）</FormLabel>
              <NumberInput
                min={5}
                max={300}
                value={localSettings.autoSaveInterval}
                onChange={(_, val) => setLocalSettings({...localSettings, autoSaveInterval: val})}
              >
                <NumberInputField />
                <NumberInputStepper>
                  <NumberIncrementStepper />
                  <NumberDecrementStepper />
                </NumberInputStepper>
              </NumberInput>
            </FormControl>
            
            <FormControl display="flex" alignItems="center">
              <FormLabel mb="0">显示字数统计</FormLabel>
              <Switch
                isChecked={localSettings.showWordCount}
                onChange={(e) => setLocalSettings({...localSettings, showWordCount: e.target.checked})}
              />
            </FormControl>
            
            <FormControl display="flex" alignItems="center">
              <FormLabel mb="0">专注模式</FormLabel>
              <Switch
                isChecked={localSettings.focusMode}
                onChange={(e) => setLocalSettings({...localSettings, focusMode: e.target.checked})}
              />
            </FormControl>
            
            <Button colorScheme="blue" onClick={saveSettings}>
              保存设置
            </Button>
          </VStack>
        </PopoverBody>
      </PopoverContent>
    </Popover>
  )
} 